<template>
  <div>
    <h1>customRef的使用</h1>
    <input type="text" v-model="name" />
  </div>
</template>

<script setup>
// let name = ref("")
// customRef: 自定义ref对象，把ref对象改写成get/set，进一步可以为它们添加 track/trigger。
import { onRenderTracked, onRenderTriggered, customRef } from "vue";

let name = customRef((track, trigger) => {
  let value = "";
  return {
    get() {
      // 如果有人访问name，就执行track()
      track();
      return value;
    },
    set(val) {
      trigger(); // 如果有人修改name，就执行trigger
      value = val;
    },
  };
});
// 仅供在开发环境下，用于ref变量的调试
onRenderTracked((ev) => console.log("name被访问了", ev));
onRenderTriggered((ev) => console.log("name被修改了", ev));
</script>

<style lang="scss" scoped>
</style>